<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
</head>
<body>

	<div id="main"
		style="width: 600px; height: 250px; display: inline-block;"></div>
	<div id="main1"
		style="width: 600px; height: 250px; display: inline-block;"></div>
	
	<div id="main2"
		style="width: 600px; height: 440px; display: inline-block;"></div>
		<div id="main3"
		style="width: 600px; height: 440px; display: inline-block;"></div>
	<script src="lib/echarts/echarts.js"></script>
	<script src="lib/echarts/jquery.js"></script>
	<script src="lib/layui/layui.all.js"></script>
	<!-- 声明layui需要的对象 -->
	<script src="js/layuibase.js"></script>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		var myChart1 = echarts.init(document.getElementById('main1'));
		var myChart2 = echarts.init(document.getElementById('main2'));
		var myChart3 = echarts.init(document.getElementById('main3'));
		//每天的收入模块
		/*START---*/
		var days = [];
		//push      pop删除
		var money = [];
	
		$.ajax({
			url : "order/incomeday",
			async : false,
			//data:请求参数 月份
			success : function(result) {

				if (result) {

					for (var i = 0; i < result.length; i++) {

						days.push(result[i].start_date);
						money.push(result[i].money);
					}
				}

			}

		});
		//每月的收入模块
		/*START---*/
		window.onload = function pie() {
		var month = [];
		//push      pop删除
		var money_month = [];
		var list = [];
        var nus = [];
		$.ajax({
			url : "order/incomemonth",
			async : false,
			//data:请求参数 月份
			success : function(result) {

				$.each(result, function (index, item) {
                    //添加数据到对象
                    //物品名
                     console.log(result);
                    list.push(item.month);
                    //物品名和数量
                    nus.push({
                        value: item.money,
                        name: item.start_date,
                    });
                });
				 console.log(list);
	                console.log(nus);


			}

		});
		
		//每年的收入模块
		/*START---*/
	
		var year = [];
		//push      pop删除
		var money_year = [];
	

		$.ajax({
			url : "order/incomeyear",
			async : false,
			//data:请求参数 月份
			success : function(result) {

				if (result) {

					for (var i = 0; i < result.length; i++) {

						year.push(result[i].start_date);
						money_year.push(result[i].money);
						

					}

				}

			}

		});
		
		/*END---*/
		//会员消费情况
		var vip_name = [];//会员姓名
		//push      pop删除
		var vip_consumption = [];//会员的总消费情况
		$.ajax({
			url : "order/consumption",
			async : false,
			//data:请求参数 月份
			success : function(result) {

				if (result) {

					for (var i = 0; i < result.length; i++) {

						vip_name.push(result[i].name);
						vip_consumption.push(result[i].money);
					}
				}

			}

		});

		// 指定图表的配置项和数据
		//ajax设置option的属性
		//每天的消费总额
		var option = {
			color : [ '#009688' ],
			title : {
				text : '每天的收入'
			},
			tooltip : {},
			legend : {
			//data: ['收入']
			},
		
			  xAxis: [
	                {
	                    type: 'category',
	                    data: days,
	                    axisTick: {
	                        alignWithLabel: true
	                    },
	                    axisLabel: {
	                        interval: 0,
	                        rotate: 10
	                    }
	                }
	            ],

	       
			
			yAxis : {},
			//从数据库里面查
			series : [
			
			{
				name : '收入',
				type : 'bar', //bar柱状图
				// data: [500, 200, 360, 410, 410, 420]
				data : money,

			},

			]
		};
		//会员
		var option1 = {
			color : [ '#96003e' ],
			title : {
				text : '会员消费情况'
			},
			tooltip : {},
			legend : {
				data : [ '消费' ]
			},
			xAxis : {
				data : vip_name
			},
			yAxis : {},
			//从数据库里面查
			series : [
			/*    {
			        name: '收入',
			        type: 'line',  //bar柱状图
			        // data: [500, 200, 360, 410, 410, 420]
			        data: money,
			        smooth:true,

			    },*/
			{
				name : '消费情况',
				type : 'bar', //bar柱状图
				// data: [500, 200, 360, 410, 410, 420]
				data : vip_consumption,

			},

			]
		};
		//每月的收入(修改前)
		var option6 = {
			color : [ '#968f00' ],
			title : {
				text : '每月的收入'
			},
			tooltip : {},
			legend : {
			//data: ['收入']
			},
			xAxis : {
			//	data : month
			},
			yAxis : {},
			//从数据库里面查
			series : [
			/*    {
			        name: '收入',
			        type: 'line',  //bar柱状图
			        // data: [500, 200, 360, 410, 410, 420]
			        data: money,
			        smooth:true,

			    },*/
			{
				name : '收入',
				type : 'bar', //bar柱状图
				// data: [500, 200, 360, 410, 410, 420]
				//data : money_month,

			},

			]
		};
		var option2 = {
			color : [ '#910096' ],
			title : {
				text : '每年的收入'
			},
			tooltip : {},
			legend : {
			//data: list
			},
			xAxis : {
				data : year
			},
			yAxis : {},
			//从数据库里面查
			series : [
			/*    {
			        name: '收入',
			        type: 'line',  //bar柱状图
			        // data: [500, 200, 360, 410, 410, 420]
			        data: money,
			        smooth:true,

			    },*/
			{
				name : '收入',
				type : 'line', //bar柱状图
				// data: [500, 200, 360, 410, 410, 420]
				data : money_year,

			},

			]
		};
		//每月的收入，修改后（饼图）
		var option3 = {
			title : {
				text : '每月的收入',

				left : 'center'
			},
			tooltip : {
				trigger : 'item'
			},
			legend : {
				orient : 'vertical',
			
				left : 'left'
			},
			series : [ {
				name : 'Access From',
				type : 'pie',
				radius : '50%',
				data : nus ,
				emphasis : {
					itemStyle : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
			]
		};
		//每月的收入，修改后（饼图，炫酷）
		var option4 = {
				title : {
					text : '每月的收入',

					left : 'center'
				},
				tooltip : {},
				  legend: {
				    top: 'bottom'
				  },
				  toolbox: {
				    show: true,
				    feature: {
				      mark: { show: true },
				      dataView: { show: true, readOnly: false },
				      restore: { show: true },
				      saveAsImage: { show: true }
				    }
				  },
				  series: [
				    {
				      name: '当月收入',
				      type: 'pie',
				      radius: [50, 200],
				      center: ['50%', '50%'],
				      roseType: 'area',
				      itemStyle: {
				        borderRadius: 8
				      },
				      data: nus,
				    }
				  ]
				};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		myChart1.setOption(option1);
		myChart2.setOption(option2);
		myChart3.setOption(option4);
		}
	</script>
</body>
</html>